<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
      <v-tooltip />
      <v-axis />
      <v-line position="x*value" />
      <v-point v-if="isPoint" position="x*value" shape="circle" />
    </v-chart>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: 254
    },
    dataSource: {
      type: Array,
      default: () => [
        { x: '1991', value: 3 },
        { x: '1992', value: 4 },
        { x: '1993', value: 3.5 },
        { x: '1994', value: 5 },
        { x: '1995', value: 4.9 },
        { x: '1996', value: 6 },
        { x: '1997', value: 7 },
        { x: '1998', value: 9 },
        { x: '1999', value: 13 }
      ]
    },
    //是否显示圆点
    isPoint: {
      type: Boolean,
      default: false
    },
    padding: {
      type: Object,
      default: () => {
        return { top: 20, right: 0, bottom: 20, left: 20 }
      }
    }
  },
  data() {
    return {
      scale: [
        {
          dataKey: 'value',
          min: 0
        },
        {
          dataKey: 'x',
          min: 0,
          max: 1
        }
      ]
    }
  }
}
</script>
